<template>
  <el-card class="box-card" >
    <el-form ref="form" :inline="true" class="userHeader">
      <el-form-item label="商品名称：">
        <el-input  v-model="common.associatedGoods" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="评论内容：">
        <el-input v-model="common.associatedUrl" placeholder="请输入评论内容" />
      </el-form-item>
      <el-form-item label="评论人：">
        <el-input v-model="common.associatedUrl" placeholder="请输入评论人" />
      </el-form-item>
      <el-form-item label="作品链接：">
        <el-input v-model="common.associatedUrl" placeholder="请输入评论人" />
      </el-form-item>
      <el-form-item label="是否包含关键字：">
        <el-input v-model="common.associatedUrl" placeholder="请输入评论人" />
      </el-form-item>
      <el-form-item label="任务创建时间：">
        <el-input v-model="common.beginDate" placeholder="请输入任务创建时间" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getuserList()">查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card class="contentTable">
    <div>
      <!-- <el-button type="primary" @click="add('add')">新增</el-button> -->
      <!-- <el-button type="danger">批量删除</el-button> -->
    </div>
    <el-table border :data="tabelData">
      <!-- <el-table-column type="selection"></el-table-column> -->
      <el-table-column 
        fixed
        label="序号"
        type="index"></el-table-column>
      <el-table-column label="商品名称" prop="associatedGood"></el-table-column>
      <!-- <el-table-column label="评论" prop="associatedUrl"></el-table-column> -->

      <!-- <el-table-column label="用户名" prop="name">
        <template #default="{ row }">
          <el-tooltip :content="row.name" placement="top" append-to-body trigger="manual" :visible="hoveredRow === row">
            <span class="cell" @mouseenter="hoveredRow = row" @mouseleave="hoveredRow = null">
              {{ row.name }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column> -->
      <el-table-column label="评论" prop="creationRemark" show-overflow-tooltip></el-table-column>
      <el-table-column label="评论人" prop="remarkPerson"></el-table-column>
      <el-table-column label="评论时间" prop="remarkDate"></el-table-column>

      <!-- <el-table-column label="操作" width="260px" align="center">
        <template #default="scoped">
          <el-button link type="primary" :icon="UserFilled">角色分配</el-button>
          <el-button link type="primary" :icon="Edit"  @click="add('edit')">编辑</el-button>
          <el-button link type="danger" :icon="Delete">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
        :background="true" :total="total" layout=" prev, pager, next, jumper,->,total, sizes"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-card>
  <el-drawer v-model="drawer" :direction="direction">
    <template #header>
      <h4>添加用户</h4>
    </template>
    <template #default>
      <el-form>
        <el-form-item label="用户姓名">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="">cancel</el-button>
        <el-button type="primary" @click="">confirm</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
// import { UserFilled, Edit, Delete } from '@element-plus/icons-vue'
import { userList2 } from '../../../api/acl/user';
import type { DrawerProps } from 'element-plus'


onMounted(() => {
  getuserList()
})
const drawer = ref(false);
const direction = ref<DrawerProps['direction']>('rtl')
const radio1 = ref('Option 1')
//添加用户
const add = (item: string) => {
  drawer.value = true;
}
//表格
const tabelData = ref([{
  name: "2333333"
}
])
const common = reactive({
  associatedGoods: "",
  associatedUrl: "",
  beginDate:"",
})
const getuserList = async () => {
  let params = {
    associatedGoods: common.associatedGoods,
    associatedUrl: common.associatedUrl,
    beginDate: common.beginDate,
    page: currentPage.value,
    pageSize: pageSize.value,
  }
  let data = (await userList2(params)) as any;
  console.log(data,'data')
  if (data.code == 200) {
    tabelData.value = data.data.list;
    total.value = data.data.total;
  }
}
// 分页
let currentPage = ref(1);
let pageSize = ref(7);
let total = ref(0);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getuserList()
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getuserList()
};

/**
 * 判断内容是否溢出
 * @param content - 单元格内容
 * @returns 是否需要显示 Tooltip
 */
// const isOverflow = (content: string): boolean => {
//   const span = document.createElement('span');
//   span.style.visibility = 'hidden';
//   span.style.position = 'absolute';
//   span.style.whiteSpace = 'nowrap';
//   span.innerText = content;
//   document.body.appendChild(span);
//   const isOverflowing = span.scrollWidth > span.offsetWidth;
//   document.body.removeChild(span);
//   return isOverflowing;
// };
// 当前悬停的行
// const hoveredRow = ref<null | Record<string, any>>(null);
</script>
<style lang="less" scoped>
.box-card {
  height: 160px;
}

.contentTable {
  margin: 10px 0;
}

.el-popper.is-dark {
  color: var(--el-bg-color);
  width: 300px;
  // z-index: 0!important;
}

.cell {
  display: block;
  // max-width: 100px;
  height: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>